/**
 * Images
 * @module images
 * {@link http://www.w3.org/TR/css3-images/ Specification}
 * =====================================================================================================================
 */

// Common variables
@images-path: "../images/";

/**
 * Image Fragments
 *
 * @example
 * .image-fragments(home, cube, mail, profile, nav, search, map;);
 */
.image-fragments(@fragments; @width: 16px; @height: 16px; @col: 1; @row: 1; @axis: x; @before: ~""; @after: ~"";) {
    .fragment(@x, @y) when (@@axis <= length(@fragments)) {
        @fragment-id: extract(@fragments, @@axis);

        @{before}&_@{fragment-id}@{after} {
            background-position: -@width * (@x - 1) -@height * (@y - 1);
        }
    }
    .fragment(@x, @y) when (@x <= length(@fragments)) and (@axis = x) {
        .fragment((@x + 1), @y);
    }
    .fragment(@x, @y) when (@y <= length(@fragments)) and (@axis = y) {
        .fragment(@x, (@y + 1));
    }
    .fragment(@col, @row);
}

/**
 * Sprite
 * {@link https://css-tricks.com/css-sprites/ CSS Tricks}
 *
 * @example
 * @file: "icons/context-menu.png";
 * @actions: add, save, edit, remove, cancel;
 * .sprite(@image: @file; @fragments: @actions; @size: 18px;);
 * .sprite(@image: @file; @fragments: @actions; @size: 18px; @top: 18px; @after: ~":hover";);
 */
.sprite(@image; @fragments; @size: 16px; @left: 0; @top: 0; @axis: x; @before: ~""; @after: ~"";) {
    & {
        background-image: url("@{images-path}@{image}");
        background-repeat: no-repeat;
    }

    .size() when (default()) {
        @width: @size;
        @height: @size;
    }
    .size() when (length(@size) > 1) {
        @width: extract(@size, 1);
        @height: extract(@size, 2);
    }
    .size();

    .image-fragments(
        @fragments: @fragments;
        @width: @width;
        @height: @height;
        @col: round(@left / @width) + 1;
        @row: round(@top / @height) + 1;
        @axis: @axis;
        @before: @before;
        @after: @after;
    );
}